<template>
	<div class="setup">
		<h1>setup 函数</h1>
	</div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
	props: {
		setups: {
			type: String,
			default: ""
		},
		p1: {
			type: String,
			default: "hhhh"
		}
	},
	setup(props, ctx) {
		//1.1  setup() 函数中无法访问到 this，但是可以访问props
		console.log("setup:", props);
		//1.2 但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
		// 如果要使用解析props 则使用torefs
		const { setups } = toRefs(props);
		// const { setups } = toRefs(props, "setups"); //????

		console.log("222:", setups.value);
		//2.ctx 是一个普通的 JavaScript 对象，它暴露三个组件的 property：
		console.log("setup 第二个参数ctx： ", ctx.slots);

		// Attribute (非响应式对象)
		console.log(ctx.attrs);

		// 插槽 (非响应式对象)
		console.log(ctx.slots);

		// 触发事件 (方法)
		console.log(ctx.emit);

		//2.2也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。
		const { attrs, slots, emit } = ctx;

		return {};
	},
	beforeCreate() {
		// console.log("beforeCreate");
	},
	created() {
		console.log("created:", this.setups);
	},
	mounted() {
		console.log("mounted:", this.setups);
	}
};
</script>
